<template>
    <div>
        <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);height: 90px;width: 100%;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <div class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>环境绿化</el-breadcrumb-item>
                    <el-breadcrumb-item>清洁记录单</el-breadcrumb-item>
                </div>
            </el-breadcrumb>
        </div>
        <div class="selectdiv">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="formInline.user" placeholder="输入姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="formInline.id_num" placeholder="输入身份证号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button type="primary" @click="dialogCreate = true">新建</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-card>
            <el-table
                    :data="cleanList"
                    style="width: 100%"
                    >
                <el-table-column
                        prop="crId"
                        label="编号"
                        min-width="20%">
                </el-table-column>
                <el-table-column
                        prop="workTime"
                        label="清洁日期"
                        min-width="30%">
                </el-table-column>
                <el-table-column
                        prop="cleaningRange"
                        label="清洁范围"
                        min-width="20%">
                </el-table-column>
                <el-table-column
                        prop="cleaningEvaluate"
                        label="评价"
                        min-width="10%">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        min-width="10%">
                    <template slot-scope="scope">
                    <el-button type="text" @click="dialogEdit = true">修改</el-button>
                    <el-button @click="removeCleanRecordById(scope.row.crId)" type="text">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
                <el-pagination
                        style="margin-top: 15px; display: flex;justify-content:flex-end;"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryInfo.pagenum"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="queryInfo.pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-card>
        </div>
        <el-dialog
                title="提示"
                :visible.sync="dialogEdit"
                width="30%"
                :before-close="handleClose">
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogEdit = false">取 消</el-button>
            <el-button type="primary" @click="dialogEdit = false">确 定</el-button>
            </span>
        </el-dialog>
        <!--新建清洁公告弹窗-->
        <el-dialog
                title="提示"
                :visible.sync="dialogCreate"
                width="50%"
                @close="addClose">
            <el-form :inline="true" :model="addCleanRecordForm" ref="addCleanRecordref" :label-position="labelPosition" label-width="100px">
                <el-form-item label="负责人编号" prop="userId">
                    <el-input v-model="addCleanRecordForm.userId" placeholder="输入负责人编号" style="width: 400px;"></el-input>
                </el-form-item>
                <el-form-item label="负责人姓名" prop="userName">
                    <el-input v-model="addCleanRecordForm.userName" placeholder="输入负责人姓名" style="width: 400px;"></el-input>
                </el-form-item>
                <el-form-item label="清洁日期" prop="workTime">
                    <el-date-picker
                            v-model="addCleanRecordForm.workTime"
                            type="date"
                            placeholder="选择清洁日期"
                            style="width: 300px;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="清洁范围" prop="cleaningRange">
                    <el-input v-model="addCleanRecordForm.cleaningRange" placeholder="输入清洁范围" style="width: 400px;"></el-input>
                </el-form-item>
                <el-form-item label="评价" prop="cleaningEvaluate">
                    <el-input v-model="addCleanRecordForm.cleaningEvaluate" placeholder="输入评价" style="width: 400px;"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogCreate = false">取 消</el-button>
            <el-button type="primary" @click="addCleanRecord">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        methods: {
            handleSizeChange (newSize) {
                // console.log(newSize)
                this.queryInfo.pagesize = newSize
                this.getCleanList()
            },
            handleCurrentChange (newSize) {
                // console.log(newSize)
                this.queryInfo.pagenum = newSize
                this.getCleanList()
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            onSubmit() {
                console.log('submit!');
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            //获取清洁记录
            async getCleanList(){
                const {data : resp}= await this.$http.get('/cleaningRecord/findAll/'+ this.queryInfo.pagenum + '/' + this.queryInfo.pagesize)
                if(resp.code !== 200) {return this.$message.error('获取清洁记录列表失败') }
                /*this.$message.success('')*/
                this.cleanList = resp.data.records
                this.total = resp.data.total
            },
            //添加清洁记录对话框关闭后清除数据
            addClose(){
                this.$refs.addCleanRecordref.resetFields()
            },
            //添加清洁记录
            addCleanRecord(){
                this.$refs.addCleanRecordref.validate(async valid => {
                    const {data: resp} = await this.$http.post('/cleaningRecord/addCleaningRecord', this.addCleanRecordForm)
                    if (resp.code !== 200) {
                        return this.$message.error('添加清洁记录失败！')
                    }
                    this.$message.success('添加清洁记录成功！')
                    this.dialogCreate = false
                    this.getCleanList()
                })
            },
            //删除清洁记录
            async removeCleanRecordById(crId) {
                const confirmResult = await this.$confirm(
                    '此操作将永久删除该清洁记录, 是否继续?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).catch(err => err)
                console.log(confirmResult)
                // 点击确定 返回值为：confirm
                // 点击取消 返回值为： cancel
                if (confirmResult !== 'confirm') {
                    return this.$message.info('已取消删除')
                }
                const {data: resp} = await this.$http.delete('/cleaningRecord/deleteCleaningRecordById/'+crId)
                if (resp.code !== 200) {return this.$message.error('删除清洁记录失败！')}
                this.$message.success('删除清洁记录成功！')
                this.getCleanList()
            },
        },
        created(){
            this.getCleanList()
        },
        data() {

            return {
                queryInfo: {
                    // 当前页数
                    pagenum: 1,
                    // 每页显示多少数据
                    pagesize: 10
                },
                labelPosition:'right',
                addCleanRecordForm:{
                    userId:'',
                    userName:'',
                    workTime:'',
                    cleaningRange:'',
                    cleaningEvaluate:'',
                },
                cleanList: [],
                total: 0,
                dialogEdit: false,
                dialogCreate:false,
                formInline: {
                    user: '',
                    id_num: ''
                }
            }


        },
    }
</script>

<style scoped>
    .selectdiv {
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .pagination {
        position: absolute;
        right: 100px;
        margin-top: 10px;
    }

    .breadcrumb {
        margin-top: 29px;
        margin-left: 20px;
        font-size: 25px
    }

</style>

